<template>
  <div>
    <div class="header">
      <i class="iconfont icon-qianjin-copy" @click="iconClick"></i>
      信用卡取现
      <div class="right" @click="toEnchashList">取现记录</div>
    </div>
    <div class="card">
      <div class="cxk">
        <div class="left-item">到账储蓄卡</div>
        <div class="right-item hasNoCard" v-if="!methodList.reachCardNo" @click="addCxk">+添加储蓄卡</div>
        <div class="right-item hasCard" v-else @click="tishi">
          <img class="bankImg" :src="methodList.reachCardBankImgUrl" alt="">
          <div class="bank">{{methodList.reachName}}（{{methodList.reachCardNo}}）</div>
        </div>
        <img class="tishi" src="../../../assets/enchash/tishi.png" alt="" @click="tishi">
      </div>
      <div class="xyk">
        <div class="left-item">取现信用卡</div>
        <div class="right-item hasNoCard" v-if="!methodList.borrowCardNo" @click="addXyk">+添加信用卡</div>
        <div class="right-item hasCard" v-else @click="changeCard(1)">
          <img class="bankImg" :src="methodList.borrowCodeBankImgUrl" alt="">
          <div class="bank">{{methodList.borrowName}}（{{methodList.borrowCardNo}}）</div>
        </div>
        <i class="iconfont icon-jiankuohaoxiyou" v-show="methodList.borrowCardNo" @click="changeCard(1)"></i>
      </div>
    </div>

    <div class="moneyContent">
      <div class="content1">取现金额</div>
      <div class="content2">
        <span>&yen;</span>
        <input type="text" placeholder="请输入整百金额" @keyup="moneyCheck" v-model="money">
      </div>
      <div class="content3">
        <div class="left">费率{{methodList.enchashment_rate}}%，立即到账</div>
        <div class="right">
          <span>•整百提取</span>
          <span>•最小提现{{methodList.minMoney}}元</span>
        </div>

      </div>
    </div>
    <div class="nextStep" @click="nextStep">下一步</div>
    <div class="infor">
      <img src="../../../assets/enchash/xiaolian.png">
      <div class="box">
        <ol>
          <li>姓名、手机号，需和开户行留存信息保持一致</li>
          <li>可取出您信用卡当前剩余的全部金额，超出不可取</li>
          <li>信用卡出账单后正常还款即可</li>
          <li>在无任何特殊原因，10分钟内可到账</li>
          <li>更多信用卡取现的问题，点击[我的]-[帮助中心]-[信用卡取现问题]</li>
          <li>如有疑问请联系微信公众号：微信号：szqb666/szqb51</li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import { MessageBox,Indicator } from "mint-ui";
export default {
  name: 'getMoney',
  components: { Top },
  data() {
    return {
      methodList: {},//信用卡和储蓄卡对象
      headTitle: '',
      money: '',
      code: ''
    }
  },
  watch: {
    money: {
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal, oldVal) {
        // window.sessionStorage.setItem('tel',curVal.tel);
      },
      deep: true
    }
  },
  mounted() {
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    if (window.localStorage.getItem('active') == '2') {
      window.localStorage.setItem('active', '1')
    }
    window.localStorage.setItem('shouTogetchashObj', '');
    if (commons.getParameter('channel')) {
      window.sessionStorage.setItem('channel', commons.getParameter('channel'));
    }
    // 查询取现详情
    this.$http.get('/loansupermarket-pay/order/haveCard?token=' + commons.getCookie('token')).then(function(response) {
      var resBody = response.body;
      if (resBody.code == '000') {
        this.methodList = resBody.data;
      } else if (resBody.code == '444') {
        this.code = '444';
        // if (!commons.getParameter('checkLogin')) {
        //   // this.$router.push({path:'/login',query:{history:1}});
        //   window.location.href = '../user/login.html?history=1';
        // }
      } else {
        MessageBox.alert(resBody.mesg);
      }
    })




  },
  methods: {
    //返回箭头
    iconClick() {
      // this.$router.go(-1);
      window.history.go(-1);
    },
    //取现记录
    toEnchashList() {
      // this.$router.push({ path: '/main/mine/enchash/enchashList'});
      window.location.href = '../mine/enchashList.html';
    },
    //添加信用卡
    addXyk() {
      if (!this.methodList.saveId) {
        MessageBox.alert('请添加到账储蓄卡', '提示');
        return;
      }
      if (this.code == '444') {
        // this.$router.push({path:'/login',query:{history:1}});
        window.location.href = '../user/login.html?history=1';
      } else {
        // this.$router.push({ path: '/main/mine/myCard/addcard', query: { active: '1' } });
        window.location.href = './addcard.html?active=1'
      }
    },
    //添加储蓄卡
    addCxk() {
      if (this.code == '444') {
        // this.$router.push({path:'/login',query:{history:1}});
        window.location.href = '../user/login.html?history=1';
      } else {
        // this.$router.push({ path: '/main/mine/myCard/addcard', query: { active: '2' } });
        window.location.href = './addcard.html?active=2'
      }
    },
    //换卡
    changeCard(id) {
      // this.$router.push({ path: '/main/mine/myCard/changecard', query: { active: id }});
      window.location.href = './changecard.html?active=' + id;
    },
    //储蓄卡提示
    tishi() {
      MessageBox.alert('只能绑定一张新的到账卡。若需更换，<br/>请先删除，再绑定新卡。<br/>位置：我的-卡包-储蓄卡', '提示');
    },
    //下一步
    nextStep() {

      if (!this.methodList.saveId) {//没有储蓄卡
        MessageBox.alert('请添加到账储蓄卡', '提示');
        return;
      }

      if (!this.methodList.creditId) {//没有信用卡
        MessageBox.alert('请添加提现信用卡', '提示');
        return;
      }

      if (!/^[1-9]\d*00$/.test(this.money)) {
        MessageBox.alert('请输入整百数字', '提示');
        return;
      }

      if (this.money < this.methodList.minMoney || this.money > this.methodList.maxMoney) {
        MessageBox.alert('取现额度为' + this.methodList.minMoney + '-' + this.methodList.maxMoney, '提示');
        return;
      }


      let queryObj = {
        money: this.money,//取现金额
        reachMoney: this.money * (100 - this.methodList.enchashment_rate) / 100,//到账金额
        shouxufei: this.money * this.methodList.enchashment_rate / 100,//手续费
        borrowCodeBankImgUrl: this.methodList.borrowCodeBankImgUrl,//信用卡图片
        reachCardBankImgUrl: this.methodList.reachCardBankImgUrl,//储蓄卡图片
        borrowName: this.methodList.borrowName,//信用卡名字
        reachName: this.methodList.reachName,//储蓄卡名字
        borrowCardNo: this.methodList.borrowCardNo,//信用卡尾号
        reachCardNo: this.methodList.reachCardNo,//储蓄卡尾号
        creditId: this.methodList.creditId,//信用卡id
        saveId: this.methodList.saveId,//储蓄卡id
        enchashment_rate: this.methodList.enchashment_rate,//汇率

      }
      window.sessionStorage.setItem('canClick', 'true');
      window.sessionStorage.setItem('shouTogetchashObj', JSON.stringify(queryObj));
      // this.$router.push({ path: '/main/mine/enchash/shouTogetchash'});
      window.location.href = './shouTogetchash.html';

    },
    //输入金额校验
    moneyCheck() {
      var moneyVal = this.money;
      if (!/^\d+$/.test(moneyVal)) {
        this.money = moneyVal.replace(/\.\d*|[^\d]+/, "");
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.header {
  background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 1.2rem; // background: $primaryColor;
  color: #fff;
  text-align: center;
  font-size: 0.42rem;
  line-height: 1.2rem;
  .icon-qianjin-copy {
    position: absolute;
    left: 0.4rem;
    color: #fff;
  }
  .right {
    position: absolute;
    right: 0.4rem;
    top: 0;
    font-size: 0.4rem;
  }
}

.card {
  .xyk,
  .cxk {
    width: 9.2rem;
    height: 1.33rem;
    line-height: 1.33rem;
    margin: 0 auto;
    margin-bottom: 0.4rem;
    background: #fff;
    border-radius: 0.15rem;
    .left-item {
      float: left;
      font-size: 0.37rem;
      margin-left: 0.4rem;
      margin-right: 0.8rem;
      color: #666;
    }
    .right-item {
      float: left;
    }
    .hasCard {
      color: #333;
      font-size: 0.42rem;
      .bankImg {
        float: left;
        width: 0.72rem;
        height: 0.72rem;
        margin-top: 0.32rem;
        margin-right: 0.21rem;
      }
      .bank {
        float: left;
      }
    }
    i.icon-jiankuohaoxiyou {
      float: right;
      margin-right: 0.4rem;
    }
    .hasNoCard {
      margin-left: 0.74rem;
      font-size: 0.42rem;
      color: #00dada;
    }
  }
  .cxk {
    margin-top: 1.6rem;
    .tishi {
      float: right;
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.4rem;
      margin-top: 0.46rem;
    }
  }
}

.moneyContent {
  padding-left: 0.66rem;
  padding-right: 0.66rem;
  background: #fff;
  .content1 {
    padding-top: 0.4rem;
    margin-bottom: 0.26rem;
    color: #656565;
    font-size: 0.32rem;
    text-align: left;
  }
  .content2 {
    font-size: 0.64rem;
    text-align: left;
    color: #ff7a7b; // margin-bottom: 0.4rem;
    height: 1rem;
    span {
      float: left;
    }
    input {
      float: left;
      width: 40%;
      color: #ff7a7b;
      font-size: 0.64rem;
      border: none;
      outline: 0;
      padding-left: 0.4rem;
    }
    input::-webkit-input-placeholder {
      color: #c8c8c8;
    }
  }
  .content3 {
    height: 1rem;
    .left {
      float: left;
      color: #666;
      font-size: 0.32rem;
    }
    .right {
      float: right;
      margin-top: -0.6rem;
      font-size: 0.32rem;
      color: #666;
      span {
        display: block;
        text-align: left;
        margin-top: 0.1rem;
      }
    }
  }
}

.nextStep {
  margin: 0 auto;
  margin-top: 0.8rem;
  width: 9rem;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.4rem;
  color: #fff;
  background: #00dada;
  border-radius: 0.15rem;
}

.infor {
  margin-top: 0.8rem;
  padding: 0.53rem 0.66rem 0.53rem 0.46rem;
  position: relative;
  background: #ededed;
  img {
    position: absolute;
    left: 0.46rem;
    top: 0.6rem;
    width: 0.266rem;
  }
  .box {
    padding-left: 0.8rem;
    text-align: left;
    ol {
      li {
        color: #adadad;
        font-size: 0.29rem;
        margin-top: 0.2rem;
      }
      li:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>
